﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<script runat="server">

</script>
<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Customized pagination
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    Use <span>trigger('goto')</span> to make customized pagination
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <style type="text/css">
        #demo > span
        {
            font-weight: bold;
            font-size: 16px;
        }
        
        #demo > p
        {
            font-size: 16px;
        }
        
        #demo select
        {
            font-size: 16px;
        }
        #Container tr.odd
        {
            background-color: #063366;
        }
        
        #Container tr.even
        {
            background-color: #131313;
        }
        
        #Container
        {
            margin-top: 10px;
            margin-bottom: 20px;
        }
        
        #Container td
        {
            padding: 2px 8px 2px 8px;
        }
    </style>
    <div id="demo">
        <span>Go to page:
            <select id="mypage" onchange="changepage(this);">
            </select></span>
        <p>
            <b>Page changed callback:</b> <span id="callback"></span>
        </p>
        <div id="Container">
        </div>
        <textarea id="template" style="display: none">
			<table>
				<tr>
					<th></th>
					<th></th>
					<th style="width:500px;">Name</th>
				</tr>
				{#foreach $T as d}
				<tr class="{#cycle values=['odd','even']}">
					<td> {$T.d$index + 1} </td>
					<td><img style="height: 75px;" src="{$T.d.__metadata.media_src}" /></td>
					<td> {$T.d.Name} </td>
				</tr>
				{#/for}
			</table>
		</textarea>
    </div>
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/databind.js"></script>
    <script type="text/javascript" src="../jQueryClient/jTemplates.js"></script>
    <script type="text/javascript" src="../jQueryClient/pagination.js"></script>
    <script type="text/javascript">
        $(function () {
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
               	ajax: {	
                    dataType : "jsonp",
                    jsonpCallback: "callback"
                },
                callback: function (data) {
                    //bind data to the "repeater"
                    $("#Container").dataBind($("#template").text(), data.d, {
                        page_size: 4,
                        //handle the page changed event
                        page_changed: function (e) {
                            $("#callback").html("You are on page: " + e.page_index + ". There are " + e.page_data.length + " items on this page.");
                        }
                    });

                    //update the customized pagination
                    var mypage = $('#mypage')
                    var page_num = Math.ceil(data.d.length / 4);
                    if (page_num > 0) {
                        mypage.append("<option value='1' selected='selected'>1</option>");
                        for (var i = 2; i <= page_num; i++) {
                            mypage.append($('<option></option>').val(i).html(i));
                        }
                    }
                }
            });
        });

        //customized pagination
        function changepage(sender) {
            var pageIndex = $(sender).find('option:selected').val();
            $("#Container").trigger("goto", pageIndex - 1);
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
        $(function () {
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
               	ajax: {	
                    dataType : "jsonp",
                    jsonpCallback: "callback"
                },
                callback: function (data) {
                    //bind data to the "repeater"
                    $("#Container").dataBind($("#template").text(), data.d, {
                        page_size: 4,
                        //handle the page changed event
                        page_changed: function (e) {
                            $("#callback").html("You are on page: " + e.page_index + ". There are " + e.page_data.length + " items on this page.");
                        }
                    });

                    //update the customized pagination
                    var mypage = $('#mypage')
                    var page_num = Math.ceil(data.d.length / 4);
                    if (page_num > 0) {
                        mypage.append("<option value='1' selected='selected'>1</option>");
                        for (var i = 2; i <= page_num; i++) {
                            mypage.append($('<option></option>').val(i).html(i));
                        }
                    }
                }
            });
        });

        //customized pagination
        function changepage(sender) {
            var pageIndex = $(sender).find('option:selected').val();
            $("#Container").trigger("goto", pageIndex - 1);
        }
	</pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
    <pre name="htmlcode" class="html:nocontrols"> 
		&lt;span&gt;Go to page: &lt;select id=&quot;mypage&quot; onchange=&quot;changepage(this);&quot;&gt;&lt;/select&gt;&lt;/span&gt;
		&lt;p&gt;
			&lt;b&gt;Page changed callback:&lt;/b&gt;
			&lt;span id=&quot;callback&quot;&gt;&lt;/span&gt;
		&lt;/p&gt;
		
		&lt;div id=&quot;Container&quot;&gt;&lt;/div&gt;
		&lt;textarea id=&quot;template&quot; style=&quot;display: none&quot;&gt;
			&lt;table&gt;
				&lt;tr&gt;
					&lt;th&gt;&lt;/th&gt;
					&lt;th&gt;&lt;/th&gt;
					&lt;th style=&quot;width:500px;&quot;&gt;Name&lt;/th&gt;
				&lt;/tr&gt;
				{#foreach $T as d}
				&lt;tr class=&quot;{#cycle values=[&#39;odd&#39;,&#39;even&#39;]}&quot;&gt;
					&lt;td&gt; {$T.d$index + 1} &lt;/td&gt;
					&lt;td&gt;&lt;img style=&quot;height: 75px;&quot; src=&quot;{$T.d.__metadata.media_src}&quot; /&gt;&lt;/td&gt;
					&lt;td&gt; {$T.d.Name} &lt;/td&gt;
				&lt;/tr&gt;
				{#/for}
			&lt;/table&gt;
		&lt;/textarea&gt;
	</pre>
</asp:Content>
